var posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight',
];

app.configParameters = {
  rotate: {
    min: -90,
    max: 90,
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right',
    },
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom',
    },
  },
  position: {
    options: echarts.util.reduce(
      posList,
      function(map, pos) {
        map[pos] = pos;
        return map;
      },
      {},
    ),
  },
  distance: {
    min: 0,
    max: 100,
  },
};

app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function() {
    var labelOption = {
      normal: {
        rotate: app.config.rotate,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        position: app.config.position,
        distance: app.config.distance,
      },
    };
    myChart.setOption({
      series: [
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
      ],
    });
  },
};

var labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {
      textBorderColor: '#fff',
    },
  },
};

option = {
  title: {
    text: '较复杂RN业务加载对比',
  },
  color: ['#EE4000', '#66CD00'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    data: ['同步加载', '异步加载'],
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['红米3', '华为P20', 'iPhone 6s', 'iPhone XS Max'],
    },
  ],
  yAxis: [
    {
      name: '时间 (MS)',
      nameLocation: 'center',
      nameGap: 40,
      type: 'value',
    },
  ],
  series: [
    {
      name: '同步加载',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      data: [3419.6, 1793.0, 3268.4, 819.8],
    },
    {
      name: '异步加载',
      type: 'bar',
      label: labelOption,
      data: [2776.2, 1576.6, 2813.8, 547.4],
    },
  ],
};
